<template>
  <q-page>
    <q-carousel
      v-model="slide"
      transition-next="slide-left"
      transition-prev="slide-right"
      swipeable
      animated
      control-color="black"
      navigation
      padding
      arrows
      height="400px"
      class="shadow-1"
    >
      <q-carousel-slide name="style" class="column flex-center">
        <q-img
          src="../assets/images/online-course.jpg"
          :ratio="16 / 9"
          width="80%"
          fit="fit"
        >
          <q-card class="absolute-top-right" style="width: 40%">
            <q-card-section>
              <div class="text-h3">在线课程</div>
              <div class="text-h6">&emsp;书山有路勤为径，学海无涯苦作舟</div>
            </q-card-section>
          </q-card>
        </q-img>
      </q-carousel-slide>
      <q-carousel-slide name="tv" class="column no-wrap flex-center">
        <q-img
          src="../assets/images/forum-discussion.jpg"
          :ratio="16 / 9"
          width="80%"
          fit="fit"
        >
          <q-card class="absolute-top-right" style="width: 30%">
            <q-card-section>
              <div class="text-h3">社区交流</div>
              <div class="text-h6">&emsp;道同气合志相感，虽旷百世如同僚。</div>
            </q-card-section>
          </q-card>
        </q-img>
      </q-carousel-slide>
      <q-carousel-slide name="layers" class="column no-wrap flex-center">
        <q-img
          src="../assets/images/university.jpg"
          :ratio="16 / 9"
          width="80%"
          fit="fit"
        >
          <q-card class="absolute-top-right" style="width: 30%">
            <q-card-section>
              <div class="text-h3">院校信息</div>
              <div class="text-h6">&emsp;乘风破浪会有时，直挂云帆济沧海。</div>
            </q-card-section>
          </q-card>
        </q-img>
      </q-carousel-slide>
    </q-carousel>
  </q-page>
</template>
<script setup>
import { ref } from "vue";

const slide = ref("style");
</script>
<style scoped></style>
